<!--
 * @Description  : 按顺序连点
 * @Author       : zhao
 * @Date         : 2022-11-01 14:06:57
 * @LastEditors  : zhao
 * @LastEditTime : 2022-11-25 18:47:10
-->

<template>
	<div class="mapCon" id="mapId">
		<!-- <div class="dropdown">
			<el-dropdown placement="bottom" @command="handleCommand">
				<span class="el-dropdown-link"> 功能列<i class="el-icon-arrow-down el-icon--right"></i> </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="连线">连线</el-dropdown-item>
					<el-dropdown-item command="添加节点">添加节点</el-dropdown-item>
					<el-dropdown-item command="修正节点">修正节点</el-dropdown-item>
					<el-dropdown-item command="编辑节点信息">编辑节点信息</el-dropdown-item>
					<el-dropdown-item command="删除节点">删除节点</el-dropdown-item>
					
					<el-dropdown-item command="删除连线">删除连线</el-dropdown-item>
					<el-dropdown-item command="修改顶点">修改顶点</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div> -->
		<!-- toolbar -->
		<ul v-if="isShow || showAll" class="toolbar" ref="toolbar">
			<!-- style="border-left: none" -->
			<li @click="handleCommand('连线', $event)" ref="toolbar_li">连线</li>
			<li @click="handleCommand('删除连线', $event)" ref="toolbar_li">删除连线</li>
			<li @click="handleCommand('添加节点', $event)" ref="toolbar_li">添加节点</li>
			<li @click="handleCommand('修正节点', $event)" ref="toolbar_li">移动节点</li>
			<li @click="handleCommand('编辑节点信息', $event)" ref="toolbar_li">编辑节点</li>
			<li @click="handleCommand('删除节点', $event)" ref="toolbar_li">删除节点</li>
			<li @click="handleCommand('修改顶点', $event)" ref="toolbar_li">修改顶点</li>
		</ul>
		<div class="search">
			<el-input placeholder="请输入地址" clearable size="medium" v-model="search" @keyup.enter.native="searchAddress" />
			<i class="el-icon-search cursor" @click="searchAddress"></i>
		</div>
		<!-- <el-color-picker v-model="color" show-alpha :predefine="predefineColors"> </el-color-picker> -->

		

		
		<el-dialog style="min-width: 500px" title="新增节点信息" :visible.sync="dialogVisible_add" :show-close="false" :modal="false" width="500px" :before-close="handleDialogClose">
			<el-form ref="ruleForm_add" :model="addForm" label-width="140px" :rules="rules">
				<!-- <el-form-item label="所属分段编码" prop="plSectionCode">
					<el-input v-model="addForm.plSectionCode" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点编码" prop="code">
					<el-input disabled v-model="addForm.code" size="medium" clearable></el-input>
				</el-form-item>-->
				<el-form-item label="节点外部编码">
					<el-input v-model="addForm.codeExtsys" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点名称" prop="name">
					<el-input v-model="addForm.name" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点类型" prop="type">
					<el-select v-model="addForm.type" @change="selectchange" placeholder="节点类型" size="medium" style="width: 100%" clearable>
						<el-option label="三通" :value="170100"></el-option>
						<el-option label="拐点" :value="170200"></el-option>
						<el-option label="末端" :value="170300"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="位置描述" prop="address">
					<el-input v-model="addForm.address" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="经度" prop="longitude">
					<el-input disabled v-model="addForm.longitude" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="纬度" prop="latitude">
					<el-input disabled v-model="addForm.latitude" size="medium" clearable></el-input>
				</el-form-item>
				<!-- <el-form-item label="最后修改人姓名" prop="lastUpdateName">
					<el-input v-model="addForm.lastUpdateName" size="medium" clearable></el-input>
				</el-form-item> -->
				<!-- <el-form-item label="最后修改时间" prop="lastUpdateTime">
					<el-date-picker v-model="addForm.lastUpdateTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
				</el-form-item> -->

				<el-form-item>
					<el-button type="primary" @click="onSubmit('ruleForm_add')">确认</el-button>
					<el-button @click="delAppointPonint">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<dataDetails :map="map" ref="dataDetails" />
		<span class="Point" id="Point"></span>
	</div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
// import OSM from "ol/source/OSM";
import XYZ from 'ol/source/XYZ';
import { defaults } from 'ol/interaction';
import { Vector as SourceVec, Cluster } from 'ol/source';
import { Snap, Draw, Modify, Select, Pointer } from 'ol/interaction';
import { Feature, control } from 'ol';
import { unByKey } from 'ol/Observable';
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style';
import { LinearRing, Point, Polygon, Circle as geomCircle, LineString } from 'ol/geom'; // 点线面
import { Vector as VectorLayer } from 'ol/layer'; // 实例化一个矢量图层Vector作为绘制层
import { transform as oltransform } from 'ol/proj'; //导入方法
import { register } from 'ol/proj/proj4';

import img from '@/assets/img/yuan.png';

import img_diaodu from '@/assets/img/diaodu.png';

import img_jiedian from '@/assets/img/jiedian.png';
import img_ranqichubeizhan from '@/assets/img/ranqichubeizhan.png';
import img_tianranqimenzhan from '@/assets/img/tianranqimenzhan(fenshuzhan).png';
import img_ranqitiaoyazhan from '@/assets/img/ranqitiaoyazhan.png';
import img_famen from '@/assets/img/famen.png';
import img_tiaoyagui from '@/assets/img/tiaoyagui.png';
import img_tiaoyagui24x24 from '@/assets/img/tiaoyagui24x24.png';
import img_ranqichubeizhan24x24 from '@/assets/img/ranqichubeizhan24x24.png';
import img_tianranqimenzhan24x24 from '@/assets/img/tianranqimenzhan(fenshuzhan)24x24.png';
import img_ranqitiaoyazhan24x24 from '@/assets/img/ranqitiaoyazhan24x24.png';

import ico_shanchu from '@/assets/icon/ico_shanchu.ico';
import ico_tianjia from '@/assets/icon/ico_tianjia.ico';

import { mapState } from 'vuex';
import dataDetails from './dataDetails.vue';

import proj4 from 'proj4';
export default {
	name: 'zmap',
	data() {
		return {
			isShow:false,
			map: null, //地图实例
			mapList: [],
			lineData: [], //连线
			initLineData: [],
			markerLayer: null, //标注图层 点
			sourceArr: null, //绘制层实例 点
			markerLayerLine: null, //标注图层 线
			sourceArrLine: null, //绘制层实例 线
			drawLine: null, //交互编辑 添加线实例
			mapRange: {}, //地图范围
			resizeTag: true,
			singleclick: null, //点击事件实例
			dialogVisible_add: false,
			addForm: {
				// codeExtsys: '14130101001001000001',
				// type: 100,
				// name: '节点',
				// address: '天安门',
				// lastUpdateName: 'zhao',
			},
			dialogVisible_edit: false,
			editForm: {},

			rules: {
				plSectionCode: [
					{ required: true, message: '请输入所属分段编码', trigger: 'blur' },
					{ min: 17, max: 17, message: '编码长度为17位', trigger: 'blur' },
				],

				codeExtsys: [{ required: true, message: '请输入节点外部编码', trigger: 'blur' }],
				name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
				type: [{ required: true, message: '请输入节点类型', trigger: 'change' }],
				address: [{ required: true, message: '请输入位置描述', trigger: 'blur' }],
				longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
				latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
			},
			color: '#ff4500',
			predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#ed1941', '#1e90ff', '#c71585', '#aa2116', '#145b7d'],
			//手动添加要素 点击在线段 获取线段经纬
			addPointLonlat: '',
			repeatPoint: [], //储存选中点
			isRepeat: null,
			search: '',
			pointerhover: null, //hover事件
			Features: null, //新增的要素点
			wait: null, //等待一秒执行
		};
	},
	props: {
		mapView: {
			//地图渲染数据
			type: Object,
			default: () => ({ center: [114.487904, 38.047707], zoom: 11 }),
		},
		list: Array,
		ent:Boolean,
		showAll:{
			type:Boolean,
			default:false
		},
		currentCompanyUuid:String,
		currentLineUuid:String,
		mapId: String,
		pl_section_code: String,
		userName: String,
		Pressure: Number,
	},
	components: { dataDetails },

	computed: {
		...mapState('piplineNodeInfo', ['pipLineNodeInfoList']),
	},
	watch: {
		mapView: {
			handler(val, oldVal) {
				var view = this.map.getView();

				view.setZoom(val.zoom);
				view.setCenter(val.center);
				// this.getMapRange();
			},
			deep: true,
		},
		currentLineUuid: {
			handler(val, oldVal) {
				// console.log(val,'ent')
				if(!this.ent && val){
                       this.isShow=true;
				}else{
					this.isShow=false;

				}
			},
			deep: true,
		},
	},
	mounted() {
		this.init();
	},

	methods: {
		setStyle(firstColor) {
			let color = firstColor || this.color;
			let style = new Style({
				//形状
				image: new CircleStyle({
					radius: 5,
					fill: new Fill({
						color: color,
					}),
				}),
				//边线颜色
				stroke: new Stroke({
					color: color,
					width: 3,
				}),
			});
			return style;
		},
		//获取节点
		async getNodeInfoList() {
			this.delMarker();
			// this.mapList = [
			// 	{
			// 		uuid: 1,
			// 		plSectionCode: 1231231231,
			// 		code: '1431231245',
			// 		codeExtsys: 12313123,
			// 		name: '节点',
			// 		type: 100,
			// 		address: '石家庄',
			// 		lastUpdateName: 'zhao',
			// 		lastUpdateTime: '2020-12-12:12:12:00',
			// 		longitude: 114.508653,
			// 		latitude: 37.979554,
			// 	},
			// 	{
			// 		uuid: 2,
			// 		plSectionCode: 1231231231,
			// 		code: '143123123',
			// 		codeExtsys: 12313123,
			// 		name: '节点',
			// 		type: 100,
			// 		address: '石家庄',
			// 		lastUpdateName: 'zhao',
			// 		lastUpdateTime: '2020-12-12:12:12:00',
			// 		longitude: 114.808653,
			// 		latitude: 37.579554,
			// 	},
			// ];
			if(this.currentCompanyUuid){
				this.mapRange.entUuid=this.currentCompanyUuid;
			}
			const res = await this.$store.dispatch('piplineNodeInfo/findNodes', this.mapRange);
			const res2 = await this.$store.dispatch('piplineNodeInfo/findStations', this.mapRange);
			const res3 = await this.$store.dispatch('piplineNodeInfo/findDevices', this.mapRange);
			this.mapList = [...res.data, ...res2.data, ...res3.data];
			
			//线上插入点
			let lonlat = this.addPointLonlat;
			if (lonlat.length > 0) {
				let newLineArr = [...this.initLineData, ...this.lineData];
				this.pipLineNodeInfoList.some((e, index) => {
					if (e.latitude == lonlat[1] && e.longitude == lonlat[0]) return this.$store.state.piplineNodeInfo.pipLineNodeInfoList.splice(index + 1, 0, res.data[res.data.length - 1]);
				});

				this.addLine(this.$store.state.piplineNodeInfo.pipLineNodeInfoList);
				this.addPointLonlat = [];
			}

			this.addMarker();
			this.initLine();
		},
		//初始化
		async init() { 	
			const mapId = this.mapId;
			this.projection_4490();
			this.map = new Map({
				// controls: defaultControls().extend([overviewMapControl]),
				target: 'mapId',
				layers: [
					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
							opaque: 'true',
						}),
					}),

					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
						}),
					}),
				],

				view: new View({
					center: this.mapView.center,
					projection: 'EPSG:4490',
					zoom: this.mapView.zoom,
					maxZoom: 18,
					minZoom: 12,
				}),
				interactions: new defaults({
					doubleClickZoom: false, //屏蔽双击放大事件
				}),
			});

			this.sourceArrLine = new SourceVec({});
			this.markerLayerLine = new VectorLayer({
				source: this.sourceArrLine,
				style: this.setStyleLine('中压'),
			});
			this.map.addLayer(this.markerLayerLine);

			this.sourceArr = new SourceVec({});
			this.markerLayer = new VectorLayer({
				style: this.setStyle('#ffcc33'),
				source: this.sourceArr,
			});
			this.map && this.map.addLayer(this.markerLayer);

			//双击退出编辑
			// this.map.on('dblclick', (dblclick) => {

			// });
			//获取视图经纬度
			this.getMapRange();
			this.map.getView().on('propertychange', this.getMapRange);
			window.addEventListener('resize', this.getMapRange);

			this.pointermove();

			this.getMousePosition();
		},
		getPipLineNodeData() {
			if(this.currentCompanyUuid){
				this.mapRange.entUuid=this.currentCompanyUuid;
			}
			this.$store.dispatch('piplineNodeInfo/findNodes', this.mapRange);
		},
		handleCommand(command, $event) {
			let arr = document.getElementsByClassName('toolbar')[0];
			arr.childNodes.forEach((e) => {
				e.style.color = '#5f6477';
			});
			$event.path[0].style = 'color:rgb(64, 158, 255)';
			this.map.removeInteraction(this.drawLine);
			unByKey(this.singleclick);
			// this.map.un('pointermove', this.getMousePosition);

			// let box = document.getElementById('Point');
			// box.style.display = 'none';-webkit-grab
			this.map.getTargetElement().style.cursor = '-webkit-grab';
			switch (command) {
				case '连线':
					this.addGeomLine();
					break;
				case '添加节点':
					this.addPoint();
					break;
				case '修正节点':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.modifyPoint();
					break;
				case '删除节点':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.delPonint();
					break;
				case '编辑节点信息':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.connection();
					break;
				case '修正连线':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.modifyLine();
					break;
				case '删除连线':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.delLine();
					break;
				case '修改顶点':
					// this.map.getTargetElement().style.cursor = 'pointer';
					this.modifyVertex();
					break;
			}
		},
		// 初始化标注
		addMarker() {
			// 创建画板

			// this.delMarker();

			this.mapList.forEach((e, index) => {
				// e.longitude = this.setPointLonLat(e.longitude, 'EPSG:4326');
				// e.latitude = this.setPointLonLat(e.latitude, 'EPSG:4326');
				const feature = new Feature({
					geometry: new Point([e.longitude, e.latitude]),
					id: index,
				});
				let image = null;
				let type = this.getType(e.type);

				image = this.judgmentTypeCorrespondingIcon(e.type, e);
				if (type == '节点') {
					feature.set('uuid', e.uuid);
					feature.set('code', e.code);
					feature.set('codeExtsys', e.codeExtsys);
					feature.set('name', e.name);
					feature.set('type', e.type);
					feature.set('address', e.address);
					feature.set('lastUpdateName', e.lastUpdateName);
					feature.set('lastUpdateTime', e.lastUpdateTime);

					feature.set('longitude', e.longitude);
					feature.set('latitude', e.latitude);
				}
				if (type == '厂站') {
					feature.set('uuid', e.uuid);

					feature.set('code', e.code);
					feature.set('codeExtsys', e.codeExtsys);
					feature.set('name', e.name);
					feature.set('type', e.type);
					feature.set('address', e.address);
					feature.set('longitude', e.longitude);
					feature.set('latitude', e.latitude);

					feature.set('entUuid', e.entUuid);
					feature.set('region', e.region);
					feature.set('description', e.description);
					feature.set('startTime', e.startTime);
					feature.set('director', e.director);
					feature.set('gasType', e.gasType);
					feature.set('storageCapacity', e.storageCapacity);
					feature.set('supplyCapacityDaily', e.supplyCapacityDaily);
					feature.set('isMhi', e.isMhi);
					feature.set('storageVolume', e.storageVolume);

					feature.set('lastUpdateName', e.lastUpdateName);
					feature.set('lastUpdateTime', e.lastUpdateTime);
					feature.set('remark', e.remark);
				}
				if (type == '附属设施') {
					feature.set('uuid', e.uuid);

					feature.set('code', e.code);
					feature.set('codeExtsys', e.codeExtsys);
					feature.set('name', e.name);
					feature.set('type', e.type);
					feature.set('address', e.address);
					feature.set('longitude', e.longitude);
					feature.set('latitude', e.latitude);

					feature.set('entUuid', e.entUuid);
					feature.set('region', e.region);
					feature.set('startTime', e.startTime);
					feature.set('description', e.description);

					feature.set('lastUpdateName', e.lastUpdateName);
					feature.set('lastUpdateTime', e.lastUpdateTime);
				}
				let style = null;
				style = new Style({
					image: new Icon({
						opacity: 1,
						src: image,
						scale: '1', // 图片缩放比例
						// size: [24, 24],
						// rotation: 90,
					}),
				});

				feature.setStyle(style); //#ffcc33
				// feature.set('plSectionCode', e.plSectionCode);

				this.sourceArr.addFeature(feature);
			});
		},
		// 删除绘制
		delMarker() {
			if (this.sourceArr != null) {
				this.sourceArr.clear();
			}
			if (this.sourceArrLine != null) {
				this.sourceArrLine.clear();
			}

			// this.markerLayer && this.map.removeLayer(this.markerLayer);
		},
		//点击要素点
		connection() {
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });

				this.$emit('openEdit', features[0].values_, true);
			});
		},
		//连线
		addGeomLine() {
			this.map.removeInteraction(snap);

			//创建一个线
			this.drawLine = new Draw({
				type: 'LineString',
				source: this.sourceArrLine,
				sourceConstrain: this.sourceArr,
				stopClick: true,
				style: this.setStyleLine('中压'),
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);

					features.some((element) => {
						if (this.sourceArr.hasFeature(element)) {
							let lonlat = [element.values_.longitude, element.values_.latitude];

							/****************   生成传入后端线段串  *********************/

							let newLineArr = [...this.pipLineNodeInfoList];
							if (this.isRepeat) {
								if (this.repeatPoint) {
									//首尾相连
									if (
										newLineArr[0].longitude == lonlat[0] &&
										newLineArr[0].latitude == lonlat[1] &&
										newLineArr[newLineArr.length - 1].longitude == this.repeatPoint[0] &&
										newLineArr[newLineArr.length - 1].latitude == this.repeatPoint[1]
									) {
										this.$store.state.piplineNodeInfo.pipLineNodeInfoList.push(element.values_);
									}
									// 已连接点 之间 连接点
									let isRepeat = newLineArr.some((e, index) => {
										if (e.latitude == lonlat[1] && e.longitude == lonlat[0]) return true;
									});
									newLineArr.some((e, index) => {
										if (newLineArr.length - 1 == index) return true;

										if (isRepeat) return true;

										if (e.latitude == this.repeatPoint[1] && e.longitude == this.repeatPoint[0]) {
											this.$store.state.piplineNodeInfo.pipLineNodeInfoList.splice(index + 1, 0, element.values_);
											this.repeatPoint = [e.longitude, e.latitude];
											return true;
										}
									});
								}
							}
							this.isRepeat = this.pipLineNodeInfoList.some((e, index) => {
								if (e.latitude == lonlat[1] && e.longitude == lonlat[0]) {
									this.repeatPoint = lonlat;

									return true;
								}
							});
							if (!this.isRepeat) this.$store.state.piplineNodeInfo.pipLineNodeInfoList.push(element.values_);

							flag = 1;
							return true;
						}
					});

					if (flag == 1) return true;
				},
			});
			var snap = new Snap({
				source: this.sourceArr,
			});

			this.map.addInteraction(this.drawLine);

			this.map.addInteraction(snap);

			this.drawLine.on('drawend', (evt) => {
				// const ldata = this.lineData.splice(0, 1);...this.initLineData,
				// this.$store.state.piplineNodeInfo.pipLineNodeInfoList.pop();

				const newLineArr = [...this.pipLineNodeInfoList];
				this.pipLineNodeInfoList.map((e, index) => {
					if (newLineArr.length > index + 1) {
						if (e.uuid == newLineArr[index + 1].uuid) {
							newLineArr.splice(index, 1);
						}
					}
				});

				this.$store.state.piplineNodeInfo.pipLineNodeInfoList = newLineArr;

				this.addLine(newLineArr);
				this.lineData = [];
				this.isRepeat = null;
				// this.$store.state.piplineNodeInfo.pipLineNodeInfoList = newLineArr;
				// this.renderLine();
			});

			this.drawLine.on('drawstart', (evt) => {
				const lonlat = evt.feature.values_.geometry.flatCoordinates;

				// evt.feature.set('plSectionCode', e.plSectionCode);
				// evt.feature.set('code', e.code);
				// evt.feature.set('codeExtsys', e.codeExtsys);
				// evt.feature.set('name', e.name);
				// evt.feature.set('type', e.type);
				// evt.feature.set('address', e.address);

				// evt.feature.set('longitude', e.longitude);
				// evt.feature.set('latitude', e.latitude);
			});
		},

		//手动添加要素点
		addPoint() {
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 })[0];

				if (features) {
					let value = features.values_;

					if (value.geometry instanceof Point) {
					}
					if (value.geometry instanceof LineString) {
						this.addPointLonlat = value.geometry.flatCoordinates;
					}
				}
				const feature = new Feature({
					geometry: new Point([e.coordinate[0], e.coordinate[1]]),
				});
				feature.setId(this.mapList.length);

				let image = img_jiedian;

				let style = new Style({
					//形状
					image: new Icon({
						opacity: 1,
						src: image,
						scale: '1', // 图片缩放比例
						// rotation: 90,
					}),
				});

				feature.setStyle(style); //#ffcc33

				this.sourceArr.addFeature(feature);

				this.addForm.longitude = this.setPointLonLat(e.coordinate[0]);
				this.addForm.latitude = this.setPointLonLat(e.coordinate[1]);
				this.addForm.lastUpdateName = this.userName;
				this.dialogVisible_add = true;
			});

			// this.addForm = {};
			// let style = new Style({
			// 	//形状
			// 	image: new Icon({
			// 		opacity: 1,
			// 		src: img,
			// 		scale: '1', // 图片缩放比例
			// 	}),
			// });
			// this.drawLine = new Draw({
			// 	//绘制层数据源
			// 	source: this.sourceArr,
			// 	/** @type {ol.geom.GeometryType}几何图形类型 */
			// 	type: 'Point',
			// 	sourceConstrain: this.sourceArrLine,
			// 	// style: this.setStyle,
			// });
			// this.drawLine.on('drawend', (e) => {
			// 	var coordinates_Point = e.feature.getGeometry().getCoordinates();
			// 	let value = e.feature.values_;
			// 	if (value.geometry instanceof Point) {
			// 		console.log('点');
			// 	}
			// 	if (value.geometry instanceof LineString) {
			// 		console.log('线');
			// 	}

			// 	if (e.feature.values_.geometry) {
			// 	}
			// 	this.mapList.push({
			// 		longitude: coordinates_Point[0],
			// 		latitude: coordinates_Point[1],
			// 	});
			// 	this.addForm.longitude = coordinates_Point[0];
			// 	this.addForm.latitude = coordinates_Point[1];
			// 	this.dialogVisible_add = true;
			// });
			// this.markerLayer.setStyle(style);

			// this.map.addInteraction(this.drawLine);
		},
		//modify
		modifyPoint() {
			this.drawLine = new Modify({
				source: this.sourceArr,
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);
					features.some((element) => {
						if (this.sourceArr.hasFeature(element)) {
							flag = 1;
							if (element.values_.type > 170300) flag = 2;
							return true;
						}
					});

					if (flag == 1) return true;
					if (flag != 1) return false;
				},
			});
			this.map.addInteraction(this.drawLine);

			this.drawLine.on('modifyend', async (evt) => {
				var extent = evt.features.item(0).getGeometry().getCoordinates();
				let obj = evt.features.array_[0].values_;
				obj.longitude = extent[0];
				obj.latitude = extent[1];
// console.log(obj,'oooooooooooooooooooooo')
				const res = await this.$store.dispatch('piplineNodeInfo/updateNode', { data: obj, uuid: obj.uuid });
				this.sourceArrLine.clear();
				this.getNodeInfoList();

				// this.mapList.map(async (e) => {
				// 	if (e.nodeId == obj.nodeId) {
				// 		e.longitude = extent[0];
				// 		e.latitude = extent[1];
				// 	}
				// });
			});
		},
		delPonint() {
			this.singleclick = this.map.on('singleclick', async (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });
				let value = features[0].values_;

				if (value.type > 170300) return;
				if (value.geometry instanceof Point) {
					const lonlat = value.geometry.flatCoordinates;

					this.sourceArr.removeFeature(features[0]);
					await this.$store.dispatch('piplineNodeInfo/deleteNode', { uuid: value.uuid });
					this.getNodeInfoList();
				}
				if (value.geometry instanceof LineString) {
				}
			});
		},
		delLine() {//这就是你需要的方法
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });
				let value = features[0]?.values_;
				if (value && value.geometry instanceof LineString) {
					const lonlat = value.geometry.flatCoordinates;
					let newLineArr = [...this.pipLineNodeInfoList];

					newLineArr.some((e, index) => {
						if (index != 0 && e.longitude == lonlat[2] && e.latitude == lonlat[3]) {
							newLineArr.splice(index, 1);

							return true;
						}
					});
					if (newLineArr.length == 1) newLineArr = [];

					this.addLine(newLineArr);
					this.sourceArrLine.removeFeature(features[0]);
				}
			});
		},//
		modifyLine() {
			this.drawLine = new Modify({
				source: this.sourceArrLine,
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);
					features.some((element) => {
						if (this.sourceArrLine.hasFeature(element)) {
							flag = 1;
							return true;
						}
					});

					if (flag == 1) return true;
				},
			});
			this.map.addInteraction(this.drawLine);

			this.drawLine.on('modifyend', (evt) => {
				var extent = evt.features.item(0).getGeometry().getCoordinates();
				let obj = evt.features.array_[0].values_;

				this.mapList.map((e, index) => {
					if (e.uuid == obj.uuid) {
						e.longitude = extent[0];
						e.latitude = extent[1];
					}
				});
			});
		},
		async initLine() {
			// console.log("zhixing");
			let lineString = [];
			// let oldArr = [...this.initLineData];
			// this.initLineData.map((e, index) => {
			// 	// 就近相连 [[1,2],[2,3]]
			// 	// if (!e) {
			// 	// 	newLineArr.splice(index, 1);
			// 	// }
			// 	lineString.push([e.longitude * 1, e.latitude * 1]);

			// 	if (!oldArr[index + 1]) return;
			// 	lineString.push([oldArr[index + 1].longitude * 1, oldArr[index + 1].latitude * 1]);

			// 	if (lineString.length == 2) {
			// 		var line = new Feature({
			// 			geometry: new LineString(lineString),
			// 		});
			// 		this.sourceArrLine.addFeature(line);
			// 		lineString = [];
			// 	}
			// 	// 下标奇偶 两两相连 [[1,2],[3,4]]
			// 	// if (index % 2 == 0) {
			// 	// 	if (!res.data[index + 1]) return;
			// 	// 	lineString.push([e.longitude * 1, e.latitude * 1], [res.data[index + 1].longitude * 1, res.data[index + 1].latitude * 1]);
			// 	// 	var line = new Feature({
			// 	// 		geometry: new LineString(lineString),
			// 	// 	});
			// 	// 	this.sourceArrLine.addFeature(line);
			// 	// 	lineString = [];
			// 	// }
			// });
			// if (!this.pl_section_code) return '';
			const res = await this.$store.dispatch('piplineNodeInfo/findSectionSections',{uuid:this.currentLineUuid});

		
			// if (this.sourceArrLine != null) {
			// 	this.sourceArrLine.clear();
			// }
			this.initLineData = res.data || [];
			this.$store.state.piplineNodeInfo.pipLineNodeInfoList = res.data || [];
			lineString = [];

			this.initLineData.map((e, index) => {
				// 就近相连 [[1,2],[2,3]]

				lineString.push([e.longitude * 1, e.latitude * 1]);

				if (!res.data[index + 1]) return;
				lineString.push([res.data[index + 1].longitude * 1, res.data[index + 1].latitude * 1]);

				if (lineString.length == 2) {
					var line = new Feature({
						geometry: new LineString(lineString),
					});
					// console.log(line);
					this.sourceArrLine.addFeature(line);
					
					lineString = [];
				}
				
			});
			
		},

		getMapRange() {
			if(!this.currentLineUuid) {
				return;
			}
			if (this.resizeTag) {
				const ex = this.map.getView().calculateExtent();
				// console.log('🚀 ~ file: map2.vue ~ line 881 ~ getMapRange ~ ex', ex);

				// const position = oltransform([ex[0], ex[1]], 'EPSG:4326', 'EPSG:4900');
				// console.log('🚀 ~ file: map2.vue ~ line 882 ~ getMapRange ~ position', position);
				this.mapRange = {
					scopea: Number(ex[0]) + ',' + Number(ex[1]),
					scopeb: Number(ex[2]) + ',' + Number(ex[3]),
				};

				// this.getPipLineNodeData();
				this.resizeTag = false;
				setTimeout(() => {
					this.resizeTag = true;
				}, 1000);
				this.getNodeInfoList();
			}
		},
		//删除最后一个点
		delAppointPonint(type) {
			const features = this.sourceArr.getFeatureById(this.mapList.length);

			this.sourceArr.removeFeature(features);
			this.addForm = {};
			this.dialogVisible_add = false;
		},
		onSubmit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let obj = { ...this.addForm };

					// obj.type = this.pad(obj.type, 4);
					delete obj.lastUpdateName;

					let obj2 = {};
					obj2[this.pl_section_code] = obj;
					obj.entUuid=this.currentCompanyUuid;
					// console.log({ data: obj},'this.addForm ')
					if(this.currentCompanyUuid){
						obj.entUuid=this.currentCompanyUuid;
			}
					await this.$store.dispatch('piplineNodeInfo/addNode', { data: obj});
					this.addForm = {};
					this.dialogVisible_add = false;
					this.getNodeInfoList();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onSubmit_edit() {
			this.$refs[formName].validate((valid) => {
				if (valid) {
// console.log(this.editForm,'this.editForm')
					this.$store.dispatch('piplineNodeInfo/updateNode', this.editForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleDialogClose() {
			this.addForm = {};
			this.dialogVisible_add = false;
			this.dialogVisible_edit = false;
		},
		selectchange() {
			// console.log('s');
			// this.addForm = { ...this.addForm };
		},
		pad(num, cover) {
			return String('0'.repeat(cover) + num).slice(-cover);
		},

		async addLine(data) {
			let objs = {};
			data.forEach((e, index) => {
				let type=String(e.type).substring(0, 2);
				// console.log(type,'ppppppppppp')
				objs[index + 1] =type+ e.uuid;
			// console.log(objs,'ddddddddd');

			});
			// objs.uuid=this.currentLineUuid;//线分段id 这个是什么？
			await this.$store.dispatch('piplineNodeInfo/updateLineNodes', { data:objs,uuid:this.currentLineUuid});
			console.log("调取initline");
			this.initLine();
		},
		//获取厂站
		getStation() {},
		renderLine() {
			if (this.sourceArrLine != null) {
				this.sourceArrLine.clear();
			}

			const arrLine = [...this.$store.state.piplineNodeInfo.pipLineNodeInfoList];
			let lineString = [];
			arrLine.map((e, index) => {
				// 就近相连 [[1,2],[2,3]]

				lineString.push([e.longitude * 1, e.latitude * 1]);

				if (!arrLine[index + 1]) return;
				lineString.push([arrLine[index + 1].longitude * 1, arrLine[index + 1].latitude * 1]);

				if (lineString.length == 2) {
					var line = new Feature({
						geometry: new LineString(lineString),
					});
					this.sourceArrLine.addFeature(line);
					lineString = [];
				}
				// 下标奇偶 两两相连 [[1,2],[3,4]]
				// if (index % 2 == 0) {
				// 	if (!arrLine[index + 1]) return;
				// 	lineString.push([e.longitude * 1, e.latitude * 1], [arrLine[index + 1].longitude * 1, arrLine[index + 1].latitude * 1]);
				// 	var line = new Feature({
				// 		geometry: new LineString(lineString),
				// 	});
				// 	this.sourceArrLine.addFeature(line);
				// 	lineString = [];
				// }
			});
		},
		//鼠标双击事件
		pointermove() {
			this.map.on('dblclick', (evt) => {
				this.map.removeInteraction(this.drawLine);
				unByKey(this.singleclick);

				// this.pointerhover && this.map.un(this.pointerhover.type, this.pointerhover.listener);
				this.map.getTargetElement().style.cursor = 'auto';

				let arr = document.getElementsByClassName('toolbar')[0];
				arr.childNodes.forEach((e) => {
					e.style.color = '#5f6477';
				});

				let box = document.getElementById('Point');
				box.style.display = 'none';

				var pixel = this.map.getEventPixel(evt.originalEvent); //坐标
				this.feature = this.map.forEachFeatureAtPixel(pixel, (features, layer) => {
					return features;
				});
				if (this.feature) {
					let value = this.feature.values_;

					this.select = value;
					let lonlat = [value.longitude, value.latitude];
					if (value.geometry instanceof Point) {
					}
				}
			});
		},
		modifyVertex() {
			this.singleclick = this.map.on('singleclick', (evt) => {
				var pixel = this.map.getEventPixel(evt.originalEvent); //坐标
				this.feature = this.map.forEachFeatureAtPixel(pixel, (features, layer) => {
					return features;
				});
				if (this.feature) {
					let value = this.feature.values_;

					this.select = value;
					let lonlat = [value.longitude, value.latitude];
					if (value.geometry instanceof Point) {
						let zindex = null;
						let isRepeat = this.pipLineNodeInfoList.some((e, index) => {
							if (e.longitude == lonlat[0] && e.latitude == lonlat[1]) {
								zindex = index;
								return true;
							}
						});
						if (!isRepeat) {
							this.pipLineNodeInfoList.unshift(value);
							this.addLine(this.pipLineNodeInfoList);
						}

						if (isRepeat) {
							this.pipLineNodeInfoList.unshift(this.pipLineNodeInfoList.splice(zindex, 1)[0]);
							this.addLine(this.pipLineNodeInfoList);
						}
						unByKey(this.singleclick);
						let arr = document.getElementsByClassName('toolbar')[0];
						arr.childNodes.forEach((e) => {
							e.style.color = '#5f6477';
						});
					}
				}
			});
		},
		//
		getType(number) {
			let newnum = number + '';
			let num = newnum.substr(0, 2);
			if (num == '17') return '节点';
			if (num == '18') return '厂站';
			if (num == '19') return '附属设施';
		},
		async searchAddress() {
			this.$emit('searchAddress', { data: this.search, type: '1' });
		},
		getMousePosition(e) {
			this.pointerhover = this.map.on('pointermove', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 })[0];

				if (features) {
					this.map.getTargetElement().style.cursor = 'pointer';

					let value = features.values_;
					if (value.uuid) {
						if (this.wait !== null) clearTimeout(this.wait);
						this.wait = setTimeout(() => {
							this.$refs.dataDetails.getSelectInfo(value);
						}, 1500);
					}
				}
				// if (!features) this.map.getTargetElement().style.cursor = '-webkit-grab';
				if (!features) this.map.getTargetElement().style.cursor = 'auto';
				if (!features) clearTimeout(this.wait);

				// if (!features) this.$refs.dataDetails.closure();
			});
		},
		//判断类型对应图标
		judgmentTypeCorrespondingIcon(value, data) {
			let img = null;
			let type = data.type;
			if (type == 170100) img = img_jiedian;
			if (type == 170200) img = img_jiedian;
			if (type == 170300) img = img_jiedian;

			if (type == 180100) img = img_ranqichubeizhan24x24;
			if (type == 180200) img = img_tianranqimenzhan24x24;
			if (type == 180300) img = img_tianranqimenzhan24x24;
			if (type == 180400) img = img_tianranqimenzhan24x24;
			if (type == 180500) img = img_tianranqimenzhan24x24;
			if (type == 180600) img = img_tianranqimenzhan24x24;
			if (type == 180700) img = img_tianranqimenzhan24x24;
			if (type == 180800) img = img_ranqitiaoyazhan24x24;
			if (type == 189900) img = img_tianranqimenzhan24x24;

			if (type == 190100) img = img_famen;
			if (type == 190200) img = img_tiaoyagui24x24;
			// img = img_jiedian;
			// if (!data.type) img = img_jiedian;
			// if (data.code.substr(0, 2) == 14) {
			// 	img = img_jiedian;
			// }
			// if (data.code.substr(0, 2) == 15) {
			// 	if (value == 100) {
			// 		img = img_famen;
			// 	} else if (value == 200) {
			// 		img = img_tiaoyagui24x24;
			// 	}
			// }
			// if (data.code.substr(0, 2) == 16) {
			// 	if (value == 100) {
			// 		img = img_ranqichubeizhan24x24;
			// 	} else if (value == 200) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 300) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 400) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 500) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 600) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 700) {
			// 		img = img_tianranqimenzhan24x24;
			// 	} else if (value == 800) {
			// 		img = img_ranqitiaoyazhan24x24;
			// 	} else if (value == 9900) {
			// 		img = '其他';
			// 	}
			// }

			return img;
		},
		setStyleLine(type) {
			let style = null;
			if (this.Pressure == 140200) {
				style = new Style({
					//形状
					image: new CircleStyle({
						radius: 5,
						fill: new Fill({
							color: '#641EFF',
						}),
					}),
					//边线颜色
					stroke: new Stroke({
						color: '#641EFF',
						width: 3,
					}),
				});
			} else if (this.Pressure == 140300) {
				style = new Style({
					//形状
					image: new CircleStyle({
						radius: 5,
						fill: new Fill({
							color: '#C896FF',
						}),
					}),
					//边线颜色
					stroke: new Stroke({
						color: '#C896FF',
						width: 3,
					}),
				});
			} else if (this.Pressure == 140400) {
				style = new Style({
					//形状
					image: new CircleStyle({
						radius: 5,
						fill: new Fill({
							color: '#64A0FF',
						}),
					}),
					//边线颜色
					stroke: new Stroke({
						color: '#64A0FF',
						width: 3,
					}),
				});
			}else{
				style = new Style({
					//形状
					image: new CircleStyle({
						radius: 5,
						fill: new Fill({
							color: '#64A0FF',
						}),
					}),
					//边线颜色
					stroke: new Stroke({
						color: '#64A0FF',
						width: 3,
					}),
				});
			}

			return style;
		},
		setPointLonLat(point, type) {
			let pon = point.toFixed(6);
			if (type == 'EPSG:4326') {
			}
			if (type == 'EPSG: 4490') {
				//对应大地2000
			}
			return pon;
		},
		projection_4490() {
			// proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
			// register(proj4);
			proj4.defs(
				'EPSG:4490',
				'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
			);
			register(proj4);
			// const position = new transform([114.3636411066758, 37.92172941456808], 'EPSG:4490', 'EPSG:4326');
			// console.log(position); // [32076900.526380263, 20003931.458460923]
		},
	},
};
</script>
<style lang='scss' scoped>
.mapCon {
	width: 100%;
	height: 100%;
	position: relative;
}
.el-dialog {
	min-width: 500px !important;
}
.dropdown {
	position: absolute;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.7);
	color: white;

	top: 10px;
	right: 40px;
	padding: 3px 10px;
	border-radius: 3px;

	.el-dropdown-link {
		cursor: pointer;
		color: white;
	}
	.el-icon-arrow-down {
		font-size: 12px;
	}
}
.el-color-picker {
	position: absolute;
	z-index: 1000;

	top: 10px;
	right: 120px;
	padding: 0px 10px;
}

.toolbar {
	width: 65%;
	max-width: 430px;
	position: absolute;
	z-index: 1000;
	top: 10px;
	right: 50px;
	text-align: center;
	padding: 10px 5px 8px;
	background: #fff;
	// background: rgba(0, 0, 0, 0.7);
	border-radius: 3px;
	li {
		list-style-type: none;
		color: #5f6477;

		height: 18px;
		padding: 0 6px;
		font-size: 12px;
		border-left: 1px #dbdee2 dashed;
		vertical-align: middle;
		cursor: pointer;
		overflow: visible;
		zoom: 1;
		display:inline-block;
		// float: left;
		margin: 4px 0;
	}
	li:first-child {
		// border-left: none;
	}
	box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
}
.el-date-editor {
	width: 100%;
}
::v-deep .ol-zoom {
	top: 90%;
}

.search {
	width: 30%;
	max-width: 300px;
	position: absolute;
	z-index: 1000;
	top: 10px;
	margin-left: 30px;
	box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
	padding: 0 30px 0 0;
	background: white;
	.el-icon-search {
		border: none;
		position: absolute;
		top: 14px;
		right: 10px;
		font-weight: 600;
		font-size: 16px;
		color: #7c8196;
	}

	.el-input {
	}
	::v-deep .el-input__inner {
		border: none;
		height: 44px;
	}
}

.Point {
	position: absolute;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background: red;
	z-index: 1000;
	display: none;
}
</style>